<template>
  <view class="bottom-bar-com">
    <view class="share pt">
      <!-- <view class="u-center" @click="handleClick('share')" v-if="!isLogin || props.isShare === '1'">
        <img :src="getImgPath('share')" style="height: 38rpx; width: 38rpx;margin-right: 10rpx">
        分享
      </view> -->
      <button open-type="share" class="natv-button u-center" :style="{color: props.mode === 'black' ? '#ffffff' : '#333333', background: 'none', borderRadius: 0}">
        <img :src="getImgPath('share')" style="height: 38rpx; width: 38rpx;margin-right: 10rpx">
        分享
      </button>
    </view>
    <view class="u-center pt" @click="handleClick('like')">
      <view class="ani-box" :class="nameClass('isLike')" style="width: 45rpx">
        <img :src="getImgPath('heart', props.option?.isLike)" class="img filled-img">
        <img :src="getImgPath('heart', props.option?.isLike)" class="img kong-img">
      </view>
      <text style="margin-left: 10rpx">{{props.option?.likeNum || '点赞'}}</text>
    </view>
    <view class="u-center pt" @click="handleClick('collect')">
      <view class="ani-box" :class="nameClass('isWorks')" style="width: 46rpx;margin-top:-6rpx">
        <img :src="getImgPath('start', props.option?.isWorks)" class="img filled-img">
        <img :src="getImgPath('start', props.option?.isWorks)" class="img kong-img">
      </view>
      <text style="margin-left: 10rpx">
        {{props.option?.worksNum || '收藏'}}
      </text>
    </view>
    <view class="u-center pt" @click="handleClick('comment')">
      <view class="ani-box" style="width: 42rpx">
        <img :src="getImgPath('comment')" class="img">
      </view>
      <text style="margin-left: 10rpx">
        {{props.option?.commentNum || '评论'}}
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { storage } from '@/utils/utils'
import { TOKEN } from '@/assets/js/config'
const _img = 'https://img.qumoyugo.com/webimgbg'
const props = defineProps({
  mode: {
    type: String,
    default: 'black'
  },
  option: {
    type: Object,
    default: () => {}
  },
  isShare: {
    type: String,
    default: ''
  }
})
const clickFirst = ref(false)
const isLogin = ref(!!storage.get(TOKEN))
const nameClass = (name) => {
  if (!props.option) return ''
  if (!clickFirst.value) {
    return props.option[name] === 1 ? 'first1' : 'first'
  } else {
    return props.option[name] === 1 ? 'filled' : 'kong'
  }
}
const emit = defineEmits(['operate'])
const getImgPath = (name, flag) => {
  if (flag) {
    return `${_img}/pets-icon-b-${name}-select.png`
  }
  if (props.mode === 'black') {
    return `${_img}/pets-icon-b-${name}.png`
  } else {
    return `${_img}/pets-icon-b-${name}-black.png`
  }
}
const handleClick = (type) => {
  if (props.isShare === '1') {
    uni.showToast({
      title: '作品正在审核，稍后再试',
      icon: 'none'
    })
    return
  }
  if (!isLogin.value) {
    uni.reLaunch({
      // eslint-disable-next-line no-undef
      url: `/pages/login?redirect=${encodeURIComponent(getCurrentPages()[0].$page.fullPath)}`
    })
  } else {
    emit('operate', type)
    clickFirst.value = true
  }
}
</script>

<style scoped lang="scss">
.bottom-bar-com{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pt{
    padding: 24rpx 0;
  }
  .ani-box{
    position: relative;
    height: 45rpx;
    &.filled{
      .filled-img {
        transition: all .4s;
        transform: scale(1);
        transition-delay: 0.2s;
      }
      .kong-img {
        transition: all .4s;
        transform: scale(0);
      }
    }
    &.kong{
      .filled-img {
        transition: all .6s;
        transform: scale(0);
      }
      .kong-img {
        transition: all .4s;
        transform: scale(1);
        transition-delay: 0.2s;
      }
    }
    &.first{
      .filled-img {
        transition: all .4s;
        transform: scale(0);
        transition-delay: 0.2s;
      }
      .kong-img {
        transition: all .4s;
        transform: scale(1);
        transition-delay: 0.4s;
      }
    }
    &.first1{
      .filled-img {
        transform: scale(1);
      }
      .kong-img {
        transform: scale(0);
      }
    }
  }
  .share{
    width: 300rpx;
    display: flex;
    align-items: center;
  }
  .img{
    height: 100%;
    width: 100%;
    position: absolute;
  }
}
</style>
